Styling Refactor for Contacts Index #102
Conversation
A multitude of minor corrections to existing tailwind.css. Fixes: - button sizing issues - removes color of alternating lines in index - contact's name no longer gets cut off early - bottom border of each contact now runs the complete length - minor alignment fixes - adds low key responsiveness to elements [Ticket: 85]
…yling/contacts-index Pulled main branch to check for merge conflicts.
| <Link to={`/contacts/${data.id}`}> | ||
| <td className="p-4 border-b truncate max-w-[8vw]"> | ||
| <td className="p-4 text-gray-700"> |
There was a problem hiding this comment.
Thank you for changing this. It was really hard to see the name because it was always showing only part of the name. For example: Jane Sm... or Jan...
It was really hard to read.
| @@ -342,7 +342,7 @@ describe("Sad Paths - Contacts Page", () => { | |||
| cy.get("input[type='search']").should( | |||
| "have.attr", | |||
| "placeholder", | |||
| "Search Contacts..." | |||
| "🔍 Search Contacts" | |||
There was a problem hiding this comment.
Adding the 🔍 doesn't change much but it makes the search bar more professional looking. Great addition!
|
I like the responsiveness when shrinking the screen. Everything is still very readable and nothing is overlapping. |
|
Overall I think these changes look great, one comment. Your PR has a check for My change requires a change to the documentation, but no check for I have updated the documentation accordingly. Is that documentation going to be updated in a subsequent issue? |
|
@wally-yawn I am planning on updating the documentation once I have all of the elements that are commonly used totally standardized across the different pages. If you think that I should take care of that first I would be more than happy to. |
Sounds good, I'll approve this and merge it. |
Type of Change
Description
Issues:
h1could be a touch smallerMotivation and Context
Issue
Related Tickets
closes sub-issue #85
Images:
Mock Up:
Screenshot of page now:
Checklist: